<template>
  <div class="caseGoal" v-if="targetFlagVal?.hasShow && !targetFlag3">
    <div class="flex flex-horizontal-between">
      <p class="title">
        案场目标
        <span v-if="AllTargetMsgFlag && unlocking('0108130100')">
          <Icon type="md-alert" :size="16" color="#FF9F00" style="line-height: 26px; margin-left: 10px" />
          案场
          <em class="em1" v-if="new Date().getFullYear() < AllTargetMsg.year">{{ AllTargetMsg.year }}年</em>

          <em class="em1">{{ AllTargetMsg.month }}月</em>
          目标还未设定，请尽快设定
          <em class="em2" @click="goGoalSetting">去设定</em>
        </span>
      </p>

      <div class="flex flex-vertical-center">
        <p class="hand view-more" style="margin-left: 20px; color: #0288ff" @click="goGoalSetting">
          案场目标
        </p>
      </div>
    </div>
    <div class="caseGoalCon">
      <div class="con" v-if="targetFlagVal?.childModelConfig[0].hasLock">
        <div class="con1 conLi">
          <div class="tit">{{ currentMonth }}月线索</div>

          <div class="crl">
            <i-circle :percent="parsePercent(clueData?.displayResult)" :size="60" stroke-color="#5DD773">
              <span class="demo-Circle-inner" style="font-size: 12px">
                {{
                  clueData?.currentMonthTargets
                    ? clueData?.displayResult
                      ? clueData.displayResult
                      : 0
                    : '--'
                }}
              </span>
            </i-circle>
          </div>
          <p class="p1">
            <span @click="goGoalReach('CLUETARGET')">
              目标：
              <i v-if="clueData?.currentState != 2">
                {{ clueData?.currentMonthTargets == null ? '--' : clueData.currentMonthTargets }}组
              </i>
              <i v-if="clueData?.currentState == 2" style="color: rgb(233, 20, 46)">未设定</i>
              <em v-if="clueData?.whether && !clueData?.diff">（补设）</em>
              <em v-if="clueData?.diff">
                <Icon
                  size="20"
                  style="vertical-align: -3px"
                  :type="clueData.diff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                  :color="clueData.diff < 0 ? '#43D85E' : '#F72F2F'" />
                <i :style="{ color: clueData.diff < 0 ? '#43D85E' : '#F72F2F' }">
                  {{ Math.abs(clueData.diff) }}
                </i>
              </em>
            </span>
            <span>实际： {{ clueData?.accumulatedThisMonth }}组</span>
          </p>
        </div>
      </div>
      <div class="con" v-if="targetFlagVal?.childModelConfig[1].hasLock">
        <div class="con1 conLi">
          <div class="tit">{{ currentMonth }}月来人</div>

          <div class="crl">
            <i-circle :percent="parsePercent(comeData?.displayResult)" :size="60" stroke-color="#5DD773">
              <span class="demo-Circle-inner" style="font-size: 12px">
                {{
                  comeData?.currentMonthTargets
                    ? comeData?.displayResult
                      ? comeData.displayResult
                      : 0
                    : '--'
                }}
              </span>
            </i-circle>
          </div>
          <p class="p1">
            <span @click="goGoalReach('VISITOR')">
              目标：
              <i v-if="comeData?.currentState != 2">
                {{ comeData?.currentMonthTargets == null ? '--' : comeData?.currentMonthTargets }}组
              </i>
              <i v-if="comeData?.currentState == 2" style="color: rgb(233, 20, 46)">未设定</i>
              <em v-if="comeData?.whether && !comeData?.diff">（补设）</em>
              <em v-if="comeData?.diff">
                <Icon
                  size="20"
                  style="vertical-align: -3px"
                  :type="comeData?.diff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                  :color="comeData?.diff < 0 ? '#43D85E' : '#F72F2F'" />
                <i :style="{ color: comeData?.diff < 0 ? '#43D85E' : '#F72F2F' }">
                  {{ Math.abs(comeData?.diff) }}
                </i>
              </em>
            </span>
            <span>实际： {{ comeData?.accumulatedThisMonth }}组</span>
          </p>
        </div>
      </div>

      <div class="con conT" v-if="targetFlag1">
        <div class="con1">
          <div class="tit">{{ currentMonth }}月认购</div>
          <div class="conTw">
            <div class="conTwo" v-if="targetFlagVal?.childModelConfig[2].hasLock">
              <div class="crl">
                <i-circle
                  :percent="parsePercent(subscribeData?.reachCount)"
                  :size="60"
                  stroke-color="#5DD773">
                  <span class="demo-Circle-inner" style="font-size: 12px">
                    {{
                      subscribeData?.count
                        ? subscribeData?.reachCount
                          ? subscribeData?.reachCount
                          : 0
                        : '--'
                    }}
                  </span>
                </i-circle>
              </div>
              <p class="p1">
                <span @click="goGoalReach('SUBSCRIPTION', 'NUMBER')">
                  目标：
                  <i v-if="subscribeData?.state != 2">
                    {{ subscribeData?.count == null ? '--' : subscribeData.count }}套
                  </i>
                  <i v-if="subscribeData?.state == 2" style="color: rgb(233, 20, 46)">未设定</i>
                  <em v-if="subscribeData?.whether && !subscribeData?.countDiff">（补设）</em>
                  <em v-if="subscribeData?.countDiff">
                    <Icon
                      size="20"
                      style="vertical-align: -3px"
                      :type="subscribeData?.countDiff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                      :color="subscribeData?.countDiff < 0 ? '#43D85E' : '#F72F2F'" />
                    <i :style="{ color: subscribeData?.countDiff < 0 ? '#43D85E' : '#F72F2F' }">
                      {{ Math.abs(subscribeData?.countDiff) }}
                    </i>
                  </em>
                </span>
                <span>实际： {{ subscribeData?.actualCount }}套</span>
              </p>
            </div>

            <div class="conTwo" v-if="targetFlagVal?.childModelConfig[3].hasLock">
              <div class="crl">
                <i-circle
                  :percent="parsePercent(subscribeData?.reachMoney)"
                  :size="60"
                  stroke-color="#5DD773">
                  <span class="demo-Circle-inner" style="font-size: 12px">
                    {{
                      subscribeData?.money
                        ? subscribeData?.reachMoney
                          ? subscribeData?.reachMoney
                          : 0
                        : '--'
                    }}
                  </span>
                </i-circle>
              </div>
              <p class="p1">
                <span @click="goGoalReach('SUBSCRIPTION', 'AMOUNT')">
                  目标：
                  <i v-if="subscribeData?.state != 2">
                    {{ subscribeData?.money == null ? '--' : subscribeData.money }}万
                  </i>
                  <i v-if="subscribeData?.state == 2" style="color: rgb(233, 20, 46)">未设定</i>
                  <em v-if="subscribeData?.whether && !subscribeData?.moneyDiff">（补设）</em>
                  <em v-if="subscribeData?.moneyDiff">
                    <Icon
                      size="20"
                      style="vertical-align: -3px"
                      :type="subscribeData?.moneyDiff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                      :color="subscribeData?.moneyDiff < 0 ? '#43D85E' : '#F72F2F'" />
                    <i :style="{ color: subscribeData?.moneyDiff < 0 ? '#43D85E' : '#F72F2F' }">
                      {{ Math.abs(subscribeData?.moneyDiff) }}
                    </i>
                  </em>
                </span>
                <span>实际： {{ subscribeData?.actualMoney }}万</span>
              </p>
            </div>
            <div class="conTwo" v-if="targetFlagVal?.childModelConfig[4].hasLock">
              <div class="crl">
                <i-circle :percent="parsePercent(subscribeData?.reachArea)" :size="60" stroke-color="#5DD773">
                  <span class="demo-Circle-inner" style="font-size: 12px">
                    {{
                      subscribeData?.area ? (subscribeData?.reachArea ? subscribeData?.reachArea : 0) : '--'
                    }}
                  </span>
                </i-circle>
              </div>
              <p class="p1">
                <span @click="goGoalReach('SUBSCRIPTION', 'AREA')">
                  目标：
                  <i v-if="subscribeData?.state != 2">
                    {{ subscribeData?.area == null ? '--' : subscribeData.area }}㎡
                  </i>
                  <i v-if="subscribeData?.state == 2" style="color: rgb(233, 20, 46)">未设定</i>
                  <em v-if="subscribeData?.whether && !subscribeData?.areaDiff">（补设）</em>
                  <em v-if="subscribeData?.areaDiff">
                    <Icon
                      size="20"
                      style="vertical-align: -3px"
                      :type="subscribeData?.areaDiff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                      :color="subscribeData?.areaDiff < 0 ? '#43D85E' : '#F72F2F'" />
                    <i :style="{ color: subscribeData?.areaDiff < 0 ? '#43D85E' : '#F72F2F' }">
                      {{ Math.abs(subscribeData?.areaDiff) }}
                    </i>
                  </em>
                </span>
                <span>实际： {{ subscribeData?.actualArea }}㎡</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="con conT" v-if="targetFlag2">
        <div class="con1">
          <div class="tit">{{ currentMonth }}月签约</div>
          <div class="conTw">
            <div class="conTwo" v-if="targetFlagVal?.childModelConfig[5].hasLock">
              <div class="crl">
                <i-circle :percent="parsePercent(signingData?.reachCount)" :size="60" stroke-color="#5DD773">
                  <span class="demo-Circle-inner" style="font-size: 12px">
                    {{ signingData?.count ? (signingData?.reachCount ? signingData?.reachCount : 0) : '--' }}
                  </span>
                </i-circle>
              </div>
              <p class="p1">
                <span @click="goGoalReach('CONTRACT', 'NUMBER')">
                  目标：
                  <i v-if="signingData?.state != 2">
                    {{ signingData?.count == null ? '--' : signingData.count }}套
                  </i>
                  <i v-if="signingData?.state == 2" style="color: rgb(233, 20, 46)">未设定</i>
                  <em v-if="signingData?.whether && !signingData?.countDiff">（补设）</em>
                  <em v-if="signingData?.countDiff">
                    <Icon
                      size="20"
                      style="vertical-align: -3px"
                      :type="signingData?.countDiff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                      :color="signingData?.countDiff < 0 ? '#43D85E' : '#F72F2F'" />
                    <i :style="{ color: signingData?.countDiff < 0 ? '#43D85E' : '#F72F2F' }">
                      {{ Math.abs(signingData?.countDiff) }}
                    </i>
                  </em>
                </span>
                <span>实际： {{ signingData?.actualCount }}套</span>
              </p>
            </div>

            <div class="conTwo" v-if="targetFlagVal?.childModelConfig[6].hasLock">
              <div class="crl">
                <i-circle :percent="parsePercent(signingData?.reachMoney)" :size="60" stroke-color="#5DD773">
                  <span class="demo-Circle-inner" style="font-size: 12px">
                    {{ signingData?.money ? (signingData?.reachMoney ? signingData?.reachMoney : 0) : '--' }}
                  </span>
                </i-circle>
              </div>
              <p class="p1">
                <span @click="goGoalReach('CONTRACT', 'AMOUNT')">
                  目标：
                  <i v-if="signingData?.state != 2">
                    {{ signingData?.money == null ? '--' : signingData.money }}万
                  </i>
                  <i v-if="signingData?.state == 2" style="color: rgb(233, 20, 46)">未设定</i>
                  <em v-if="signingData?.whether && !signingData?.moneyDiff">（补设）</em>
                  <em v-if="signingData?.moneyDiff">
                    <Icon
                      size="20"
                      style="vertical-align: -3px"
                      :type="signingData?.moneyDiff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                      :color="signingData?.moneyDiff < 0 ? '#43D85E' : '#F72F2F'" />
                    <i :style="{ color: signingData?.moneyDiff < 0 ? '#43D85E' : '#F72F2F' }">
                      {{ Math.abs(signingData?.moneyDiff) }}
                    </i>
                  </em>
                </span>
                <span>实际： {{ signingData?.actualMoney }}万</span>
              </p>
            </div>
            <div class="conTwo" v-if="targetFlagVal?.childModelConfig[7].hasLock">
              <div class="crl">
                <i-circle :percent="parsePercent(signingData?.reachArea)" :size="60" stroke-color="#5DD773">
                  <span class="demo-Circle-inner" style="font-size: 12px">
                    {{ signingData?.area ? (signingData?.reachArea ? signingData?.reachArea : 0) : '--' }}
                  </span>
                </i-circle>
              </div>
              <p class="p1">
                <span @click="goGoalReach('CONTRACT', 'AREA')">
                  目标：
                  <i v-if="signingData?.state != 2">
                    {{ signingData?.area == null ? '--' : signingData.area }}㎡
                  </i>
                  <i v-if="signingData?.state == 2" style="color: rgb(233, 20, 46)">未设定</i>
                  <em v-if="signingData?.whether && !signingData?.areaDiff">（补设）</em>
                  <em v-if="signingData?.areaDiff">
                    <Icon
                      size="20"
                      style="vertical-align: -3px"
                      :type="signingData?.areaDiff < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                      :color="signingData?.areaDiff < 0 ? '#43D85E' : '#F72F2F'" />
                    <i :style="{ color: signingData?.areaDiff < 0 ? '#43D85E' : '#F72F2F' }">
                      {{ Math.abs(signingData?.areaDiff) }}
                    </i>
                  </em>
                </span>
                <span>实际： {{ signingData?.actualArea }}㎡</span>
              </p>
            </div>
          </div>
        </div>
      </div>
      <div class="con" v-if="targetFlagVal?.childModelConfig[8].hasLock">
        <div class="con1 conLi">
          <div class="tit">{{ currentMonth }}月回款</div>

          <div class="crl">
            <i-circle :percent="parsePercent(allData?.reachPaymentMoney)" :size="60" stroke-color="#5DD773">
              <span class="demo-Circle-inner" style="font-size: 12px">
                {{
                  allData?.paymentMoney ? (allData?.reachPaymentMoney ? allData?.reachPaymentMoney : 0) : '--'
                }}
              </span>
            </i-circle>
          </div>
          <p class="p1">
            <span @click="goGoalReach('PAYMENT')">
              目标：
              <i v-if="allData?.paymentState != 2">
                {{ allData?.paymentMoney == null ? '--' : allData.paymentMoney }}万
              </i>
              <i v-if="allData?.paymentState == 2" style="color: rgb(233, 20, 46)">未设定</i>
              <em v-if="allData?.paymentWhether && !allData?.paymentDiffMoney">（补设）</em>
              <em v-if="allData?.paymentDiffMoney">
                <Icon
                  size="20"
                  style="vertical-align: -3px"
                  :type="allData?.paymentDiffMoney < 0 ? 'ios-arrow-round-down' : 'ios-arrow-round-up'"
                  :color="allData?.paymentDiffMoney < 0 ? '#43D85E' : '#F72F2F'" />
                <i :style="{ color: allData?.paymentDiffMoney < 0 ? '#43D85E' : '#F72F2F' }">
                  {{ Math.abs(allData?.paymentDiffMoney) }}
                </i>
              </em>
            </span>
            <span>实际： {{ allData?.actualPaymentMoney }}万</span>
          </p>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import dailyApi from '@/biz/buildingHome/daily'
  export default {
    data() {
      return {
        currentMonth: new Date().getMonth() + 1,
        currentDate: '2023-08-12',
        clueData: null,
        comeData: null,
        allData: null,
        subscribeData: null,
        signingData: null,
        AllTargetMsg: null,
        AllTargetMsgFlag: false,
        targetFlagVal: null,
        targetFlag1: true,
        targetFlag2: true,

        targetFlag3: true
      }
    },
    components: {},
    computed: {},
    watch: {},
    methods: {
      goGoalReach(tabVal, val) {
        this.$router.push({
          name: 'goalReach',
          params: {
            curState: tabVal,
            otherState: val
          }
        })
      },
      parsePercent(val) {
        let aNum = val ? Number(val.replace('%', '')) : 0
        return aNum ? Math.min(aNum, 100) : 0
      },
      getBuildInfo() {
        dailyApi.getBuildInfo({ housesId: this.$dt.buildInfo().housesId }).then((res) => {
          this.targetFlag3 =
            res.list[0].status == '4' || res.list[0].status == '5' || res.list[0].status == '6'
        })
      },
      getTemplate(data) {
        dailyApi.getModelListForApp({ buildingId: this.$dt.buildInfo().housesId }).then((res) => {
          this.targetFlagVal = res[4]

          this.targetFlag1 =
            this.targetFlagVal.childModelConfig[2].hasLock ||
            this.targetFlagVal.childModelConfig[3].hasLock ||
            this.targetFlagVal.childModelConfig[4].hasLock
          this.targetFlag2 =
            this.targetFlagVal.childModelConfig[5].hasLock ||
            this.targetFlagVal.childModelConfig[6].hasLock ||
            this.targetFlagVal.childModelConfig[7].hasLock
        })
      },
      goGoalSetting() {
        this.$router.push({
          name: 'buildingConfigure',
          params: {
            fromCustomer: 'targetManagement'
          }
        })
      },

      getAllTargetMsg() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId
        }
        dailyApi.getAllTargetMsg(params).then((res) => {
          if (res && res.length) {
            this.AllTargetMsgFlag = true
            this.AllTargetMsg = res[0]
          } else {
            this.AllTargetMsgFlag = false
          }
        })
      },
      getCurrentMonthAndNextMonth1() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          date: this.currentDate
        }
        dailyApi.getCurrentMonthAndNextMonth1(params).then((res) => {
          this.allData = res
          this.subscribeData = res.subscription
          this.signingData = res.contract
        })
      },
      getCurrentMonthAndNextMonth() {
        let params = {
          buildingId: this.$dt.buildInfo().housesId,
          date: this.currentDate,
          type: 1
        }
        dailyApi.getCurrentMonthAndNextMonth(params).then((res) => {
          this.clueData = res
          let params1 = {
            buildingId: this.$dt.buildInfo().housesId,
            date: this.currentDate,
            type: 2
          }
          dailyApi.getCurrentMonthAndNextMonth(params1).then((res) => {
            this.comeData = res
          })
        })
      }
    },
    activated() {
      this.currentMonth = new Date().getMonth() + 1
      this.getBuildInfo()

      const currentDate = new Date()
      const year = currentDate.getFullYear()
      const month = String(currentDate.getMonth() + 1).padStart(2, '0')
      const day = String(currentDate.getDate()).padStart(2, '0')
      this.currentDate = `${year}-${month}-${day}`
      this.getCurrentMonthAndNextMonth()
      this.getCurrentMonthAndNextMonth1()
      this.getAllTargetMsg()
      this.getTemplate()
    }
  }
</script>
<style lang="scss" scoped>
  .caseGoal {
    background-color: #fff;
    padding: 20px 15px;
    border-radius: 5px;
    margin-top: 13px;
    .line {
      border-right: 1px #dcdee2 solid;
    }
    .title {
      padding-left: 8px;
      color: #222;
      font-size: 18px;
      border-left: 2px solid #2298ff;
      font-weight: bolder;
      span {
        font-weight: normal;
        display: inline-block;
        background-color: #f9f9f9;
        height: 30px;
        line-height: 30px;
        font-size: 14px;
        border-radius: 6px;
        padding-right: 20px;
        margin-left: 10px;
        .em1 {
          color: #ff9f00;
          font-style: normal;
        }
        .em2 {
          color: #196dff;
          display: inline-block;
          margin-left: 30px;
          font-style: normal;
          cursor: pointer;
        }
      }
    }

    .caseGoalCon {
      margin-top: 16px;
      display: flex;
      width: 100%;
      overflow-x: auto;
      padding-bottom: 20px;

      .con {
        position: relative;
        &::after {
          content: ' ';
          width: 1px;
          height: 103px;
          background: #e1e1e1;
          position: absolute;
          top: 30px;
          right: 0;
        }
        &:last-child::after {
          display: none;
        }
        .con1 {
          padding: 0 10px;

          .tit {
            font-size: 16px;
            color: #333;
            text-align: left;
          }
          .crl {
            margin: 16px 0 16px 10px;
          }
          .p1 {
            font-size: 14px;

            span {
              display: block;
              white-space: nowrap;
              > i {
                font-style: normal;
              }
              em {
                font-style: normal;
                color: #999999;
                i {
                  font-style: normal;
                }
              }
            }
            span:first-child {
              cursor: pointer;
            }
          }
          .conTw {
            display: flex;
            flex-direction: row;
            .conTwo {
              min-width: 170px;
              padding: 0 20px;
            }
          }
        }
        .conLi {
          min-width: 170px;
          padding: 0 20px;
        }
      }
      .conT {
        .tit {
          padding-left: 10px;
        }
      }
    }
  }
</style>
